<template>
	<view>
		<image class="bejt-img" :src="imageUrl" mode="" />
		<view class="box-dl">
			<view class="bt">金蝶社区问答</view>
			<view class="box-user">
				<image style="width: 28rpx; height: 32rpx;" src="../../static/company@2x.png" mode="" />
				<input v-model="enterpriseCode" @blur="fetchAuthorizationCode" style="margin-left: 15rpx;"
					placeholder="请输入企业编码" />
			</view>
			<view class="box-user">
				<image style="width: 28rpx; height: 32rpx;"
					src="http://openapi.keyboardadmin.com:9001/chuanyuan/user.png" mode="" />
				<input v-model="data.username" style="margin-left: 15rpx;" placeholder="请输入用户名" />
			</view>
			<view class="box-password">
				<image style="width: 28rpx; height: 32rpx;"
					src="http://openapi.keyboardadmin.com:9001/chuanyuan/psw.png" mode="" />
				<input v-model="data.password" style="margin-left: 15rpx;" placeholder="请输入密码" type="password" />
			</view>
			<view class="fuxuank">
				<view class="checkbox-container" @click="onChange">
					<image v-if="checked" style="width: 34rpx;height: 34rpx;" src="../../static/agree@2x.png" mode="" />
					<image v-else style="width: 34rpx;height: 34rpx;" src="../../static/agree_no@2x.png" mode="" />
					<view style="margin-left: 16rpx;">记住密码</view>
				</view>
			</view>
			<button @click="login" class="buniap" round type="info">登录</button>
		</view>
		<view class="bux_bootom">
			<view>&reg;版权归属 金华市喆云信息科技有限公司</view>
			<view>联系电话：13335999845</view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue'; // Vue 3 导入
	import {
		login,
		getAuthorizationCode
	} from '../../../jinDieYunfuben/api/login/login'; // 导入登录加密模块

	export default defineComponent({
		setup() {
			const data = ref({
				username: '', // 存储用户名
				password: '', // 存储密码
			});
			const enterpriseCode = ref(''); // 存储企业编码
			const checked = ref(true); // 记住密码的状态
			const imageUrl = ref('http://openapi.keyboardadmin.com:9001/KingdeeCommunity/bg@3x.png'); // 背景图片URL

			// 当企业编码输入框失去焦点时调用此方法
			const fetchAuthorizationCode = async () => {
				if (enterpriseCode.value) { // 检查企业编码是否非空
					try {
						await getAuthorizationCode(enterpriseCode.value); // 调用接口获取授权码
					} catch (error) {
						console.error('获取授权码失败:', error.message); // 处理错误并输出
					}
				}
			};

			// 登录方法
			const login = async () => {
				if (!data.value.username || !data.value.password) { // 检查用户名和密码是否为空
					uni.showToast({
						title: '请输入用户名和密码', // 弹出提示
						icon: 'none'
					});
					return; // 如果为空则退出
				}

				try {
					const response = await login(data.value.username, data.value.password, enterpriseCode
						.value); // 调用登录接口
					if (response.statusCode === 200 && response.data.code === 200) { // 检查响应状态
						if (checked.value) { // 如果选择记住密码
							uni.setStorageSync('loginUsername', data.value.username); // 存储用户名
							uni.setStorageSync('loginPassword', data.value.password); // 存储密码
							uni.setStorageSync('rememberChecked', true); // 存储记住密码状态
						} else {
							// 移除存储的信息
							uni.removeStorageSync('loginUsername');
							uni.removeStorageSync('loginPassword');
							uni.removeStorageSync('rememberChecked');
						}
						uni.navigateTo({ // 登录成功后跳转到首页
							url: '/pages/Home/home',
						});
					} else {
						uni.showToast({
							title: response.data.message || '登录失败', // 显示失败信息
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '请求失败', // 处理请求错误
						icon: 'none'
					});
				}
			};

			// 处理记住密码的选中状态变化
			const onChange = () => {
				checked.value = !checked.value; // 切换记住密码的状态
				if (checked.value) { // 如果选中
					uni.setStorageSync('loginPassword', data.value.password); // 存储密码
					uni.setStorageSync('loginUsername', data.value.username); // 存储用户名
					uni.setStorageSync('rememberChecked', true); // 更新记住密码状态
				} else {
					// 移除存储的信息
					uni.removeStorageSync('loginPassword');
					uni.removeStorageSync('loginUsername');
					uni.removeStorageSync('rememberChecked');
				}
			};

			// 在组件挂载时，从本地存储中读取已保存的信息
			onMounted(() => {
				data.value.password = uni.getStorageSync('loginPassword') || ''; // 获取密码
				data.value.username = uni.getStorageSync('loginUsername') || ''; // 获取用户名
				enterpriseCode.value = uni.getStorageSync('enterpriseCode') || ''; // 获取企业编码
				checked.value = uni.getStorageSync('rememberChecked') || false; // 获取记住密码状态
			});

			return {
				data,
				enterpriseCode,
				checked,
				imageUrl,
				fetchAuthorizationCode,
				login,
				onChange
			};
		}
	});
</script>

<style scoped>
	.cliwuq {
		float: left;
		border-radius: 50%;
	}

	.bejt-img {
		width: 750rpx;
		height: 100vh;
		position: relative;
	}

	.box-dl {
		width: 660rpx;
		height: 812rpx;
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -52%);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.box-user,
	.box-password {
		padding-left: 15rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		width: 585rpx;
		height: 100rpx;
		border-radius: 16rpx;
	}

	.buniap {
		width: 550rpx;
		height: 88rpx;
		color: #FFFFFF;
		background: linear-gradient(270deg, #2865ea 0%, #4088f2 100%);
		border-radius: 50rpx;
		line-height: 88rpx;
	}

	.fuxuank {
		width: 585rpx;
	}

	.bt {
		font-weight: 700;
		height: 78rpx;
		font-size: 60rpx;
		color: #222222;
		line-height: 78rpx;
		text-align: center;
	}

	.bux_bootom {
		width: 412rpx;
		height: 64rpx;
		font-size: 22rpx;
		color: #222222;
		position: absolute;
		left: 50%;
		margin-left: -206rpx;
		bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
	}
</style>